<template>
	<Transition name="list">
	<div class="search_card_view" :style="dynamicStyles" v-if="show">
		<el-card shadow="never">
			<template #header>
				<div class="card-header">
					<span>{{ title || '搜索' }}</span>
				</div>
			</template>
			<div style="padding: 0 10px;">
				<formBuildTem ref="formBuildRef" :formOption="formOption" @formDataChange="handleInternalFormChange"></formBuildTem>
			</div>
			<div class="search-card-footer">
				<el-button type="primary" :icon="SearchIcon" @click="triggerSearch" size="small">搜索</el-button>
				<el-button :icon="RefreshIcon" @click="triggerReset" size="small">重置</el-button>
			</div>
			<template #footer v-if="showFooder">Footer content</template>
		</el-card>
	</div>
	</Transition>
</template>

<script>
	import formBuildTem from './formBuild.vue'
	import { Search, Refresh } from '@element-plus/icons-vue'
	import { markRaw } from 'vue'
	export default {
		name: 'searchCard',
		components: { formBuildTem },
		props: {
			title: {
				type: String,
				default: '搜索'
			},
			showFooder: {
				type: Boolean,
				default: false
			},
			formOption: {
				type: Array,
				default: () => []
			},
			width:{
				type: [String, Number],
				default: '100%'
			},
			autoSearch: {
				type: Boolean,
				default: true
			},
			searchDelay: {
				type: Number,
				default: 100
			}
		},
		data() {
			return {
				show:true,
				internalFormData: {},
				SearchIcon: markRaw(Search),
				RefreshIcon: markRaw(Refresh),
				searchTimer: null,
				isInitialized: false
			}
		},
		computed: {
			dynamicStyles() {
				if (typeof this.width === 'number') {
					return { width: this.width + 'px' };
				}
				return { width: this.width };
			}
		},
		watch: {
			internalFormData: {
				handler(newVal, oldVal) {
					// 只有在组件初始化完成后才执行自动搜索
					if (this.autoSearch && this.isInitialized) {
						this.debouncedSearch();
					}
				},
				deep: true,
				immediate: false
			}
		},
		created() {
			this.formOption.forEach(option => {
				this.internalFormData[option.key] = option.value;
			});
		},
		mounted() {
			// 延迟标记为已初始化，避免初始化时触发搜索
			this.$nextTick(() => {
				setTimeout(() => {
					this.isInitialized = true;
				}, 100);
			});
		},
		unmounted() {
			// 清理定时器
			if (this.searchTimer) {
				clearTimeout(this.searchTimer);
			}
		},
		methods: {
			handleInternalFormChange(formDataFromBuild) {
				this.internalFormData = formDataFromBuild;
			},
			triggerSearch() {
				this.$emit('searchSubmit', { ...this.internalFormData });
			},
			debouncedSearch() {
				// 清除之前的定时器
				if (this.searchTimer) {
					clearTimeout(this.searchTimer);
				}
				
				// 设置新的定时器
				this.searchTimer = setTimeout(() => {
					this.triggerSearch();
				}, this.searchDelay);
			},
			triggerReset() {
				// 重置时暂时禁用自动搜索
				this.isInitialized = false;
				
				const clearedFormData = {};
				this.formOption.forEach(option => {
					clearedFormData[option.key] = option.componentsName === 'el-select' && option.props?.multiple ? [] : (option.value !== undefined ? option.value : '');
				});
				this.internalFormData = { ...clearedFormData };

				if (this.$refs.formBuildRef && typeof this.$refs.formBuildRef.resetFormFields === 'function') {
					this.$refs.formBuildRef.resetFormFields();
				} else {
					console.warn('formBuildRef.resetFormFields() is not available. Consider formBuild.vue re-initialization or a dedicated reset method.');
				}
				
				// 立即执行搜索
				this.$emit('searchSubmit', { ...this.internalFormData });
				
				// 重新启用自动搜索
				this.$nextTick(() => {
					setTimeout(() => {
						this.isInitialized = true;
					}, 100);
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.search_card_view {
		height: 100%;
		display: flex;
		flex-direction: column;
		.el-card {
			display: flex;
			flex-direction: column;
			height: 100%;
		}
		:deep(.el-card__body) {
			flex-grow: 1;
			overflow-y: auto;
			padding-bottom: 10px;
		}
	}
	
	.search-card-footer {
		padding: 10px;
		text-align: right;
		border-top: 1px solid var(--el-border-color-lighter);
	}
	
	.list-enter-active,
	.list-leave-active {
		transition: all 0.2s ease;
	}
	
	.list-enter-from,
	.list-leave-to {
		opacity: 0;
		width: 0 !important;
	}
	

</style>